<template>
  <div style="line-height: 60px; display: flex; justify-items: center; align-items: center;">
    <div style="flex: 1;font-size: 20px; display: flex;">
      <div style="cursor: pointer; padding-top: 3px;" @click="collapse">
        <el-icon size="20px" v-if="collapseBtnClass==='el-icon-s-fold'"><ArrowLeft/></el-icon>
        <el-icon size="20px" v-else><ArrowRight /></el-icon>
      </div>
      <span style="font-size: 18px;margin-left: 6px;">当前时间：{{ nowDate }}</span>
    </div>
    <div id="full-screen" style="margin-right: 20px;cursor:pointer; display: flex; align-items: center;">
      <el-icon :size="20" style="margin-right: 3px;" @click="fullScreen()">
        <FullScreen />
      </el-icon>
      <span>全屏</span>
    </div>
    <el-dropdown style="width: 100px; cursor: pointer" trigger="click">
      <span class="el-dropdown-link" style="display: flex;align-items: center;">
        {{ employee.employeename }}
        <el-icon :size="20" style="margin-left: 8px">
          <Setting />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu style="padding-left: 8px; width: 100px; text-align: center">
          <el-dropdown-item style="font-size: 14px; padding: 5px 0">
            <span @click="person">个人信息</span>
          </el-dropdown-item>
          <el-dropdown-item style="font-size: 14px; padding: 5px 0">
            <span @click="updatePass">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item style="font-size: 14px; padding: 5px 0">
            <span @click="logout">注销</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import dayjs from 'dayjs' //时间格式转换插件
// import { ElMessage } from 'element-plus';
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    employee: Object
  },
  data() {
    return {
      nowDate: '',
    }
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;//需要监听的数据
    }
  },
  created() {
    setInterval(() => {
      this.nowDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
    }, 10)
  },
  methods: {
    collapse() {
      this.$emit("asideCollapse")
    },
    logout() {
      ElMessageBox.confirm(
        '确定要退出登录吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.$store.commit("logout")
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '退出取消',
        })
      })
    },
    updatePass() {
      this.$router.push('/updatePwd')
    },
    person() {
      this.$router.push('/person')
    },
    fullScreen() {
      if (!screenfull.isEnabled) {
        ElMessage({
          showClose: true,
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
  }
}
</script>

<style scoped>
</style>